<template>
    <div class="maxWzp">
        <div class="bit">
            <el-button type="primary" size="mini" @click="river">开启河流</el-button>

            <el-button type="primary" size="mini" @click="bus">轨迹边线</el-button>

        </div>
        <div id="mars3dContainer" class="mars3dContainer">

        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            map: null
        }
    },
    mounted(){
        this.initMap()
    },
    methods:{
        // 轨迹
        bus(){
            let trainBusLayer = new mars3d.layer.GeoJsonLayer({
                url: "/static/json/lixiaqujieline.json",
                allowDrillPick: false,
                symbol: {
                type: "polylineC",
                styleOptions: {
                    clampToGround: false,
                    width: 50, // 线宽
                    materialType: "PolylineGlow",
                    materialOptions: {
                    color: "#ffaa00",
                    opacity: 0.5,
                    glowPower: 0.06 // 发光强度
                    }
                }
                },
            })

            this.map.addLayer(trainBusLayer);
        },
        // 河流
        river(){
            let riverLayer = new mars3d.layer.GeoJsonLayer({
                url: "/static/json/river.json",
                allowDrillPick: false,
                symbol: {
                type: "waterC",
                styleOptions: {
                    normalMap: "/static/img/waterNormals.jpg",
                    frequency: 5000.0,
                    animationSpeed: 0.05,
                    amplitude: 9.0,
                    specularIntensity: 0.8,
                    baseWaterColor: "#00baff",
                    blendColor: "#00baff",
                    zIndex: 10,
                    show: true
                }
                }
            })
            this.map.addLayer(riverLayer);
        },
        initMap() {
            // 创建三维地球场景
            this.map = new mars3d.Map("mars3dContainer", {
                scene: {
                center: { lat: 36.676720, lng: 117.023666, alt: 10000, heading: 0, pitch: -90 },
                showSun: true,
                showMoon: true,
                showSkyBox: true,
                showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
                fog: true,
                fxaa: true,
                globe: {
                    showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
                    depthTestAgainstTerrain: false,
                    baseColor: "#546a53"
                },
                cameraController: {
                    zoomFactor: 3.0,
                    minimumZoomDistance: 1,
                    maximumZoomDistance: 50000000,
                    enableRotate: true,
                    enableZoom: true
                },
                mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
                mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL// 2D下左右一直可以滚动重复世界地图
                },
                control: {
                baseLayerPicker: false, // basemaps底图切换按钮
                homeButton: false, // 视角复位按钮
                sceneModePicker: false, // 二三维切换按钮
                navigationHelpButton: false, // 帮助按钮
                fullscreenButton: false, // 全屏按钮
                contextmenu: { hasDefault: false } // 右键菜单
                }
            })

            // 方式2：在创建地球后调用addLayer添加图层(直接new对应type类型的图层类)
            let tileLayer = new mars3d.layer.TdtLayer({
                name: "天地图影像注记",
                key: mars3d.Token.tiandituArr,
                layer: "tdtVecLayer",
                style: 'default',
                format: 'image/jpeg',
                invertColor: true,
                filterColor: "#4e70a6",
                brightness: 0.6,
                contrast: 1.8,
                gamma: 0.3,
                hue: 1,
                saturation: 0
                
            })
            this.map.addLayer(tileLayer)


            this.bus()
            this.river()
            return this.map
        }
    }
}
</script>

<style scoped>
    .maxWzp{
        width: 99%;height: 98%;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }
    
    .bit{
        width: 130px;
        height: 100%;
        border: 1px solid red;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mars3dContainer{
        width: calc(100% - 150px);
        height: 100%;
        border: 1px solid red;

    }
    

    >>> .el-button{
        margin: 0px;
        margin-top: 15px;
    }
</style>